<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<%-- <%@taglib uri="spring.tld" prefix="spring"%> --%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    	<base href="<%=basePath%>">
    
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>用户中心</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="keywords" content="">
		<link rel="shortcut icon" href="<%=basePath%>resources/images/favicon.ico" />
		<link href="resources/bootstrap/css/bootstrap-huan.css" rel="stylesheet">
		<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="resources/css/style.css" rel="stylesheet">
		
		<link href="resources/css/exam.css" rel="stylesheet">
		<link href="resources/chart/morris.css" rel="stylesheet">
		<!--[if lte IE 8]>
			<script type="text/javascript" src="resources/chartjs/excanvas.js"></script>
		<![endif]-->
		<style>
			.table-striped a{
				text-decoration: underline;
			}
			
			.span-success{
				color:#5cb85c;
				font-weight:bolder;
			}
			
			.span-danger{
				color:#d9534f;
				font-weight:bolder;
			}
			
			.span-info{
				color:#5bc0de;
				font-weight:bolder;
			}
			
			h6{
				font-weight:bold !important; 
			}
			
			.radar-legend li span {
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 20px;
				height: 100%;
				border-radius: 5px;
			}
			
			.radar-legend li {
				display: block;
				padding-left: 30px;
				position: relative;
				margin-bottom: 4px;
				border-radius: 5px;
				padding: 2px 8px 2px 28px;
				font-size: 14px;
				cursor: default;
				-webkit-transition: background-color 200ms ease-in-out;
				-moz-transition: background-color 200ms ease-in-out;
				-o-transition: background-color 200ms ease-in-out;
				transition: background-color 200ms ease-in-out;
			}				
			
			#field-switch{
				margin:15px 0 10px 0px;;
				height:34px;
				width:200px;
			}
		</style>
	</head>
	<body>
		<jsp:include page="header.jsp"/>
		<!-- Slider starts -->
		<div>
			<!-- Slider (Flex Slider) -->
			<div class="container" style="min-height:500px;">
				<div class="row">
					<div class="col-xs-2">
						<ul class="nav default-sidenav">
							<li class="active">
								<a> <i class="fa fa-dashboard"></i> 用户中心 </a>
							</li>
							<li>
								<a href="student/analysis"> <i class="fa fa-bar-chart-o"></i> 统计分析 </a>
							</li>
							<li>
								<a href="student/exam-history"> <i class="fa fa-history"></i> 考试历史 </a>
							</li>
							<%--<li>
								<a href="student/training-history"> <i class="fa fa-book"></i> 培训历史 </a>
							</li>--%>
						</ul>
					</div>
					<div class="col-xs-10">
						<div class="page-header">
							<h1><i class="fa fa-dashboard"></i> 用户中心</h1>
						</div>
						<div class="page-content row">
							<div class="col-xs-4">
								<h6>个人信息</h6>
								<div>
									<span >姓名：</span>
									<span> ${username }</span>
								</div>
								<div>
									<span >邮箱：</span>
									<span> ${email } </span>
								</div>
							</div>
						</div>
						<div class="page-content row">
							<div class="col-xs-12" id="radar-div">
								<h6>知识掌握情况</h6>
								<select id="field-switch" class="form-control">
										<c:forEach items="${fieldList }" var="item">
											<option value="${item.fieldId }">${item.fieldName }</option>
										</c:forEach>
								</select>
								<div class="page-content row">
									
									<div class="col-xs-8">
										<div id="mychart" style="height:450px;"></div>
										<p>此统计数据不包括简答、论述、分析等主观题</p>
									</div>
									<div class="col-xs-4" id="radar-legend">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<jsp:include page="footer.jsp"/>
		<!-- Slider Ends -->
		<!-- Javascript files -->
		<!-- jQuery -->
		<script type="text/javascript" src="resources/js/jquery/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="resources/js/echarts.js"></script>
		<!-- Bootstrap JS -->
		<script type="text/javascript" src="resources/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		$("#field-switch").val("${fieldId}");
		$("#field-switch").change(function(){
			window.location.href="student/usercenter/"+ $(this).val();
		});
			$(function(){
				var option = {
					    //提示框
					    tooltip : {
					        trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    //图例
					    legend: {
							// 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
							orient: 'vertical',
							// 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right'
					        x : 'left',
							// 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'
					        //y : 'bottom',
					        data:['已做试题',"未做试题","正确试题","错误试题"]
					    },
					    //工具栏
					    toolbox: {
					        show : true,
					        feature : {
					            //mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    series : [
					        {
					            name:"试题练习完成度",
                                type:"pie",
                                radius : [20, 55],
                                center : ['25%', '50%'],
                                roseType : 'radius',
					            data : [
					                {
					                    value : ${WrongTimes + RightTimes},
					                    name : '已做试题'
					                },
					                 {
					                    value : ${RestAmount},
					                    name : '未做试题'
					                }
					            ],
								itemStyle:{
									normal:{
										label:{
											show: true,
											formatter: '{b} : {c}'
										},
										labelLine :{show:true}
									}
								}
					        },
							{
								name: '试题练习正确度',
								type: 'pie',
								radius :[20,55],
								center :['75%','50%'],
								roseType : 'radius',
								data : [
									{
										value : ${RightTimes},
										name : '正确试题'
									},
									{
										value : ${WrongTimes},
										name : '错误试题'
									}
								],
								itemStyle:{
									normal:{
										label:{
											show: true,
											formatter: '{b} : {c}'
										},
										labelLine :{show:true}
									}
								}
							}
					    ]
					};
				var myChart = echarts.init(document.getElementById('mychart'));
				myChart.setOption(option);
			});
		</script>
	</body>
</html>